<template>
	<view class="uni-list">
		<view class="uni-list-cell">
			<view class="uni-list-cell-left">
				{{label}}
			</view>
			<view class="uni-list-cell-db">
				<picker @change="change" :value="index" :range="array">
					<view class="text" style="text-align:right">{{array[index]}}
						<uni-icons type="right" size="16" color="#1224534d" class="ml-8"></uni-icons>
					</view>
				</picker>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			index: {
				type: Number,
				default: 0

			},
			array: {
				type: Array,
				default: () => ([])
			},
			label: {
				type: String,
			},
			change: {
				type: Function,
				default: (e) => {}
			}
		},
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.uni-list {
		height: 48px;
		background: #FFFFFF;
		margin-top: 8px;
		margin-bottom: 8px;
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
	
		.uni-list-cell {
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
	
			.uni-list-cell-left {
				font-size: 16px;
				color: #12245380;
				padding: 0px 0px 0px 11px;
				line-height: 48px;
			}
	
			.uni-list-cell-db {
				flex: 1;
	
				.text {
					text-align: right;
					font-size: 16px;
					color: #122453;
					line-height: 48px;
					padding: 0px 18.5px 0px 0px;
				}
	
				.mlr {
					margin-left: 8px;
				}
			}
		}
	}
</style>
